<template>
  <div class='my' id="mypahes" ref="mypahes">
    <!-- 导航 -->
    <header>
      <header-c></header-c>
    </header>
    <!-- 状态 -->
    <template v-if="userID !== null">
      <nav>
        <my-state :userID="userID"></my-state>
      </nav>
    </template>
    <!-- 内容 -->
    <div class="content">
      <div class="content-left">
        <div class="birthday">
          <i class="iconfont icon-shengrix ioc"></i>
          <span>于 {{ createData }} 加入 rebirth</span>
        </div>
      </div>
      <div class="content-right">
        <div class="navlist">
          <div class="navlist-left">
            <ul class="navlist-left-ul">
              <li v-for="item in navlist" :key="item.id"
                :class="[
                { 'iocok': item.router === type || item.router === 'blog' && type === '' }
                ]"
                @click="run(item.router)"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
          <div class="navlist-right">
            <input type="text" placeholder="搜索他的内容" v-model="inputvalue">
            <i class="icon-search iconfont searchioc"></i>
          </div>
        </div>
        <!-- 组件的不同渲染 -->
        <my-blog v-if="type === 'blog' || type === ''" :list="[]" :userID="userID"></my-blog>
        <my-attention-fans v-if="type === 'attention' || type === 'fans' "
          :userID="userID"
          :queryType="type"
        ></my-attention-fans>
        <my-collect
        v-if="type === 'collect'"
        ></my-collect>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, onMounted, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
// 导入组件
import headerC from '../../components/headerC/index.vue'
import myState from '../../components/my-state/index.vue'
import myBlog from '../../components/my-blog/index.vue'
import myAttentionFans from '../../components/my-attention_fans/index.vue'
import myCollect from '../../components/my-collect/index.vue'
import { ifloginuser } from '../../tool/ifany'
import { getDateAPI } from '../../api/userAPI'


// 接口
// type

export default defineComponent({
  name: '',
  components: {
    headerC,
    myState,
    myBlog,
    myAttentionFans,
    myCollect
  },
  setup () {
    // 绑定搜索
    const inputvalue = ref<string>('')
    // 定义导航栏的内容
    const navlist = reactive([
        {
          id: 0,
          name: '我的文章',
          router: 'blog'
        },
        {
          id: 1,
          name: '我的收藏',
          router: 'collect'
        },
        {
          id: 2,
          name: '我的关注',
          router: 'attention'
        },
        {
          id: 3,
          name: '我的粉丝',
          router: 'fans'
        },
        {
          id: 4,
          name: '我的点赞',
          router: 'praise'
        }
      ])
    
  
    // 获取route和router
    const $route = useRoute()
    const $router = useRouter()
    // 获取配置好的用户id
    const userID: any = $route.query.userID
    // 判定navlist的class
    const type = ref($route.query.type)
    watch(() => $route.query.type, () => {
      type.value = $route.query.type
    })
    const run = (router: string) => {
      $router.replace({
        name: 'my',
        query: {
          userID: userID,
          type: router
        }
      })
    }
    const createData = ref<string>('')
    const createDataF = async () => {
      if(!ifloginuser()) {
        return
      }
      const res = await getDateAPI(userID)
      createData.value = res.data.data.createTime
      console.log(createData.value);
    }

    // 生命周期大全
    onMounted(() => {
      createDataF()
    })
    return {
      userID,
      navlist,
      type,
      run,
      inputvalue,
      createData
    }
  }
})
</script>

<style lang='scss' scoped>
.my{
  padding-bottom: 20px;
  background-color: #f4f5f5;
}
.iocok{
  border-bottom:1px solid skyblue ;
}

.content {
  display: flex;
  gap: 25px;
  margin-top: 20px;
  padding: 0 68px;
  .content-left{
    .birthday{
      width: 334px;
      height: 50px;
      padding: 13px 16px;
      background-color: #fff;
      display: flex;
      align-items: center;
      color: #555666;
      .ioc{
        color: #000;
        font-weight: 600;
      }
    }
  }

  .content-right{
    .navlist{
      width: 1033px;
      height: 48px;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px 0 0;
      .navlist-left{
        .navlist-left-ul{
          display: flex;
          align-items: center;
          li{
            padding: 14px 16px;
            cursor: pointer;
          }
        }
      }
      .navlist-right{
        position: relative;
        .searchioc{
          position: absolute;
          right: 7px;
          top: 50%;
          transform: translateY(-50%);
          font-size: 18px;
        }
        input{
          width: 336px;
          height: 32px;
          border: 1px solid #e8e8ed;
          border-radius: 16px;
          font-size: 14px;
          padding: 1px 2px 1px 25px;
        }
      }
    }
  }
}
</style>
